const path = require('path')
const uglify = require('uglifyjs-webpack-plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require('autoprefixer')
// const miniCssExtractPlugin = require('mini-css-extract-plugin')


const config = {
	mode: 'development', //production，模式：开发/生产（上线）
	entry: {	//	入口：应用程序的起点入口。从这个起点开始，应用程序启动执行
		index: path.resolve(__dirname, './src/js/index.js'),
		detail: path.resolve(__dirname, './src/js/detail.js'),
		collections: path.resolve(__dirname, './src/js/collections.js')
	},
	output: {	//	输出：指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」
		path: path.resolve(__dirname + '/dist'),	//	output 目录对应一个绝对路径。
		filename: 'js/[name].js'	//	每个输出 bundle 的名称,[name]为任意名字
	},
	module: {
		rules: [
			{
				test: /\.js$/,	//	匹配特定条件。一般是提供一个正则表达式或正则表达式的数组，但这不是强制的。
				loader: 'babel-loader',	// 必须有一个 loader 属性是字符串。它使用 loader 解析选项（resolveLoader），相对于配置中的 context 来解析。
				exclude: path.resolve(__dirname, 'node_modules'),	//	排除特定条件。一般是提供一个字符串或字符串数组，但这不是强制的。
				//	不包含当前目录下的node_modules文件（表示条件），exclude：不包括，include：包括
				query: {	//	options属性的别名，使用options属性代替
					'presets': ['latest']	//	使用多种版本
				}
			},

      {
      	test: /\.tpl$/,	//	匹配tpl结尾的文件
      	loader: 'ejs-loader'	//	使用ejs-loader
			},
			
			{
				test: /\.scss$/,
				use: [	//	个应用于模块的 UseEntries 数组。每个入口(entry)指定使用一个 loader。
				//（注意：如果横排写多个loader，从右到左解析，竖排写多个loader，从下到上解析）
					// {
					// 	loader: miniCssExtractPlugin.loader,	//	不用加引号，因为miniCssExtractPlugin是引入的依赖
					// 	options: {	//	options 属性为字符串或对象。值可以传递到 loader 中，将其理解为 loader 选项。
					// 		hmr: process.env.NODE_ENV === 'development'	//hmr:hot module reload(热模块更新)，node环境下，如果是development模式，需要热更新
					// 	}
					// },
					'style-loader',
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							plugins: function () {
								return [autoprefixer('last 5 versions')]	//	使用autoprefixer的最新5个版本
							}
						}
					},
					'sass-loader'
				]
			},

			{
				test: /\.(png|jpg|jpeg|gif|ico)$/i,	//	正则，忽略字母大小写
				// loader: [
				// 	'url-loader?limit=1024&name=img/[name]-[hash:16].[ext]',	//	limit:1024以下便以为base64编码，name：打包后放置到img文件夹下名字+哈希（16位）+本身后缀（png/jpg等）
				// 	'image-webpack-loader'	//	图片压缩
				// ]
				use: [
					{
							loader: 'url-loader',
							options: {
									limit: 1024,
									name: 'img/[name]-[hash:16].[ext]',
									esModule: false
							}
					},
					'image-webpack-loader'
				]
			}
		]
	},

	plugins: [	//	以各种方式自定义 webpack 构建过程
		new uglify(),	//	引入的uglifyjs-webpack-plugin
		new htmlWebpackPlugin({	//	https://github.com/jantimon/html-webpack-plugin
			minify: {	//	https://github.com/DanielRuf/html-minifier-terser#options-quick-reference
			//	Controls if and in what ways the output should be minified  ---- true if mode is 'production', otherwise false【如果是生产模式才运行，开发模式不运行】
				removeComments: true,	//	http://perfectionkills.com/experimenting-with-html-minifier/#remove_comments
				//	删除注释，<!-- some comment --><p>blah</p>  ==> <p>blah</p>
				collapseWhitespace: true	//	http://perfectionkills.com/experimenting-with-html-minifier/#collapse_whitespace
				// 合并空格，<div> <p>    foo </p>    </div> ==> <div><p>foo</p></div>
			},
			filename: 'index.html',	//	The file to write the HTML to. 【将html写入的文件】
			template: path.resolve(__dirname, 'src/index.html'),	//	webpack relative or absolute path to the template. By default it will use src/index.ejs if it exists.【到模板的相对/绝对路径】
			title: '新闻头条',	//	The title to use for the generated HTML document，默认为Webpack App
			chunkSortMode: 'manual',	//	Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are 'none' | 'auto' | 'manual' | {Function}	【chunk：模块】【在模块被包含在html前将其排序】
			chunks: ['index'],	//	Allows you to add only some chunks (e.g only the unit-test chunk)【允许添加的模块】
			excludeChunks: ['node_modules'],	//	Allows you to skip some chunks 【允许跳过的模块】
			hash: true	//	If true then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting 【true：将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。对清除缓存有作用】
		}),
		new htmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'detail.html',
      template: path.resolve(__dirname, 'src/detail.html'),
      title: '新闻详情',
      chunksSortMode: 'manual',
      chunks: ['detail'],
      excludeChunks: ['node_modules'],
      hash: true
		}),
		new htmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'collections.html',
      template: path.resolve(__dirname, 'src/collections.html'),
      title: '我的收藏',
      chunksSortMode: 'manual',
      chunks: ['collections'],
      excludeChunks: ['node_modules'],
      hash: true
    })
		// new miniCssExtractPlugin({	//	 extracts CSS into separate files 【提取css到单独的文件】，It creates a CSS file per JS file which contains CSS.【为每个包含css的js文件创建css文件】，It supports On-Demand-Loading of CSS and SourceMaps.【支持css和sourceMaps按需加载】
		// 	// Options similar to the same options in webpackOptions.output【与output相近】
		// 	filename: 'css/[name].css'
		// })
	],

	devServer: {	//	用于快速开发应用程序
		watchOptions: {	//	与监视文件相关的控制选项
			//	https://webpack.docschina.org/configuration/watch
			ignored: /node_modules/,	//	排除一些巨大的文件夹,不坚挺node_modules
		},
		host: 'localhost',	//	指定使用一个 host。默认是 localhost (本地主机)，也可以使用外部服务器访问，指定为0.0.0.0
		port: 3200	//	指定要监听请求的端口号（自由设定，不能与其他端口冲突）
	}
	
}

module.exports = config